<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <style type="text/css">
        body {
            background: #f4f4f4;
            background-position: center;
            background-size: cover;
            position: relative;
            line-height: 0;
            font-size: 13px;

        }

        header {
            position: relative;
        }

        header .pic img {
            width: 100%;
        }

        .search {
            position: absolute;
            bottom: 0px;
            width: 100%;
        }

        .aui-searchbar-wrap {
            background: rgba(255, 255, 255, .3)
        }

        .aui-searchbar {
            -webkit-box-pack: start;
        }

        .shili .aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 10px 0 0 0px;
        }

        .shili .aui-list-view {
            margin-bottom: 8px;
        }

        .w20 {
            width: 20%;
        }
        .w20 .aui-img-body{
            font-size: 13px !important;
        }
        .w20 img{
            margin-top:3px;
            width:85% !important;
        }
        .w19 {
            width: 18.8%;
            margin-left:1%;
        }
        .bgWhite {
            background: white;
        }

        nav .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 18px 0;
        }

        nav .aui-list-view.aui-grid-view {
            padding-bottom: 5px;
        }
        .aui-list-view{
            margin-bottom:10px;
        }
        /*特色*/
        .tese .zfTitle{
            margin-bottom:10px;
        }
        .tese .aui-list-view.aui-grid-view {
            padding: 0;
        }

        .tese .aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0;
            margin-bottom: 3px;
            position: relative;
        }
        .pic{
            position: relative;
        }
        .tese .aui-img-body {
            position: absolute;
            bottom: 0px;
            color: #fff;
            font-weight: bold;
            letter-spacing: 2px;
            padding: 18px 0 !important;
            right: 0;
            left: 0;
        }

        .tese .aui-list-view.aui-grid-view .aui-list-view-cell:nth-of-type(3n+2) {
            margin: 0 .5%;
        }

        .tese .aui-col-xs-4 {
            width: 33%;
        }

        .zfTitle {
            padding:20px 15px;
            font-size: 14px;
            /*border-left: 3px solid #327afa;*/
        }

        /*实力商家*/

        .shili .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 18px 0;
        }

        .shili .aui-list-view.aui-grid-view {
            /*padding-right: 1% ;*/
            padding-bottom: 5px;
        }
        .shili .aui-list-view.aui-grid-view{
            padding-right:0;
        }
        .shili .aui-list-view-cell {
            float: left;
        }

        /*库存*/
        .kucun img {
            width: 100%;
        }

        .kucun {
            margin-bottom: 15px;
        }

        /*行业市场*/
        .hangye .aui-col-xs-3 img {
            width: 40% !important;
        }

        .hangye .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 15px 0 !important;
            font-size: 13px;
        }

        /*分类*/
        .contain {
            line-height: 1.4;
            background: #fff;
            overflow: hidden;
        }

        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
        }
        .contain-left .aui-list-view-cell {
            padding: 12px;

        }

        .contain .aui-list-view:after {
            border: none;
        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }
        .contain-left,.contain-right{
            overflow-y: auto;
            height: 100%;
        }
        .contain-right {
            padding: 12px;
            width: 75%;
            float: left;
            display: inline-block;
        }
        .contain .aui-content{
            overflow-y:auto;
            position: relative;
        }
        .contain-right .pic img {
            width: 100%;
        }

        .tuijian-title {
            padding: 8px;
        }
        .tuijian{
            position: relative;
        }
        .other {
            display: none;
            text-align: center;
            overflow-y: hidden;
        }
        .other ul{
            position: relative;
            overflow-y: hidden;
        }
        .other .aui-list-view-cell {
            padding: 8px 0;
        }

        .other .aui-list-view-cell:after {
            border: none;
        }

        .aui-icon-sort {
            font-size: 20px !important;
        }
        .contain{
            height:100%;
        }
        .fenlei {
            position: absolute;
            top: 45px;
            display: none;
            width: 100%;
            bottom:0;
        }

        .other-title {
            padding: 15px;
            font-size: 14px;
            font-weight: 400;
            width: 100%;
            display: inline-block;
            position: relative;
        }

        .slide-img{
            width: 100%;height:100%;
            background-size: cover;
        }
        .font-weight-700{
            font-weight: 700;
            font-size: 20px;
        }
        .toutiao{
            line-height:1;
            background: #fff;
        }
        .aui-text-danger{
            color: #ff0000 !important;
        }
        .aui-btn-danger.aui-bg-danger{
            background: #ff0000 !important;
            border-color: #ff0000 !important;
            /*padding: 5px !important;*/
        }
        .toutiaoTile{
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            width: calc(100% - 135px);
        }
        .aui-ellipsis-1{
            padding-right: 0;
        }
        .guandian{
            height: 22px;
            line-height: 19px;
        }
    </style>
</head>
<body>
<header>
<!--     <div class="pic">
        <img src="../image/index1.jpg">
    </div>
    <div class="search">
        <div class="aui-searchbar-wrap demo" id="search">
            <div class="aui-searchbar aui-border-radius" tapmode onclick="openToTwo('search')">
                <i class="aui-iconfont aui-icon-search"></i>

                <div class="aui-searchbar-text">请输入搜索内容</div>
                <div class="aui-searchbar-input">
                    <form action="javascript:search();">
                        <input type="search" placeholder="请输入搜索内容" id="search-input">
                    </form>
                </div>
                <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
            </div>
            <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
        </div>
    </div> -->
    <div class="slide">
        <div id="aui-slide">
            <div class="aui-slide-wrap" >
                <div class="aui-slide-node">
                    <div class="slide-img" style="background-image: url(../image/index.jpg);"></div>
                </div>
                <!--<div class="aui-slide-node">-->
                    <!--<div class="slide-img" style="background-image: url(http://ww2.sinaimg.cn/large/006lzkDOgw1fap95egf0gj30p00dw770.jpg);"></div>-->
                <!--</div>-->

                <div class="aui-slide-node">
                    <div class="slide-img" style="background-image: url(../image/index.jpg);"></div>
                </div>
            </div>
            <div class="aui-slide-page-wrap"><!--分页容器--></div>
        </div>
    </div>

</header>
<nav>
    <ul class="aui-list-view aui-grid-view">
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="tobrand()">
            <img class="aui-img-object" src="../image/shang.jpg">

            <div class="aui-img-body">
                品牌商家
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="openToTwo('gongchang_win')">
            <img class="aui-img-object" src="../image/gongchang-icon.jpg">

            <div class="aui-img-body">
                工厂直销
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="openToTwo('gongying_win')">
            <img class="aui-img-object" src="../image/gongqiu.jpg">

            <div class="aui-img-body">
                供求信息
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="funcGotoBakHome(2)">
            <img class="aui-img-object" src="../image/wuliu.jpg">

            <div class="aui-img-body">
                物流配送
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="openToTwo('qiugou_win')">
            <img class="aui-img-object" src="../image/ruzhu.jpg">

            <div class="aui-img-body">
                求购
            </div>
        </li>
    </ul>
</nav>
       <!--<div class="kucun">-->
         <!--<img src="../image/ceshi.jpg" onclick="openToTwo('my/comAuthentiction_win')">-->
    <!--</div>-->
<div class="toutiao aui-flex-col aui-flex-row aui-flex-middle  aui-padded-10 aui-border-b aui-padded-0" style="height: 45px;">
    <div class="aui-pull-left aui-padded-r-5 aui-border-r font-weight-700 ">行业<span class="aui-text-danger">头条</span></div>
    <div class="aui-pull-left aui-flex-col  aui-padded-0-5">
            <div class="guandian aui-padded-0-5 aui-btn aui-btn-danger aui-bg-danger" >观点</div>
        </div>
        <div class=" toutiaoTile" >
        <ul >
            <li class="aui-ellipsis-1">1纱增长长线长线线格不断增长，背后秘密？1</li>
            <li class="aui-ellipsis-1">2纱增长长线长线线格不断增长，背后秘密？2sdfds</li>
            <li class="aui-ellipsis-1">3纱增长长线长线线格不断增长，背后秘密？3</li>
            <li class="aui-ellipsis-1">4纱增长长线长线线格不断增长，背后秘密？4</li>
            <li class="aui-ellipsis-1">5纱增长长线长线线格不断增长，背后秘密？5</li>

        </ul>
        </div>

    </div>
</div>
<div class="aui-content content">
    <!-- 特色 -->
    <div class="tese bgWhite">
        <div class="zfTitle  aui-border-b" style="margin-bottom: 0;">行业特色</div>
        <ul class="aui-list-view aui-grid-view" id="Trade-content"></ul>
    </div>
    <!-- 实力商家 -->
    <div class="shili bgWhite">
        <div class="zfTitle  aui-border-b">实力商家</div>
        <ul class="aui-list-view aui-grid-view" id="Brand-content">

            <!--<li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="">-->
            <!--<img class="aui-img-object" src="../image/shili.jpg">-->
            <!--</li>-->
            <!--<li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="">-->
            <!--<img class="aui-img-object" src="../image/shili.jpg">-->
            <!--</li>-->
            <!--<li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="">-->
            <!--<img class="aui-img-object" src="../image/shili.jpg">-->
            <!--</li>-->
            <!--<li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="">-->
            <!--<img class="aui-img-object" src="../image/shili.jpg">-->
            <!--</li>-->
            <!--<li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="">-->
            <!--<img class="aui-img-object" src="../image/shili.jpg">-->
            <!--</li>-->
        </ul>
    </div>
    <!-- 商品库存 -->
    <div class="kucun">
        <img src="../image/kucun.jpg" onclick="openToTwo('stock_win')">
    </div>
    <!-- 行业市场 -->
    <div class="hangye bgWhite">
        <div class="zfTitle  aui-border-b">行业市场</div>
        <ul class="aui-list-view aui-grid-view" id="Market-content"></ul>
    </div>
</div>
<!-- 分类 -->

<script id="Trade-template" type="text/x-dot-template">

    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img aui-col-xs-4" data-url="{{=it[i].url}}"  tapmode onclick="toCategoryList({{=it[i].object_id}},'{{=it[i].title}}')">
        <img class="aui-img-object cache" src="{{=it[i].image_src}}">

        <div class="aui-img-body">
            {{=it[i].title}}
        </div>
    </li>
    {{ } }}
</script>
<script id="Brand-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" tapmode onclick="go2Shop('{{=it[i].object_id}}')">
        <img class="aui-img-object cache" src="{{=it[i].image_src}}">
    </li>
    {{ } }}
</script>
<script id="Market-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img aui-col-xs-3" onclick="toCategoryList({{=it[i].catid}},'{{=it[i].catname}}');">
        <img class="aui-img-object cache" src="{{=it[i].image_src}}">

        <div class="aui-img-body">
            {{=it[i].catname}}
        </div>
    </li>
    {{ } }}
    <!-- 这个要保留的 -->
    <!--<li class="aui-list-view-cell aui-img aui-col-xs-3 more" date-style="1">-->
        <!--<img class="aui-img-object more_src" src="../image/zhankai.jpg">-->

        <!--<div class="aui-img-body">-->
            <!--收起-->
        <!--</div>-->
    <!--</li>-->
</script>
<script id="Category-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
        onclick='changeCategory(this), categorySubordinate({{=it[i].catid}})'>
        {{=it[i].catname}}
    </li>
    {{ } }}
</script>
<script id="Hot-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="aui-content">
        <div class="tuijian-title aui-ellipsis-1">{{=it[i].catname}}</div>
        <ul class="aui-list-view aui-grid-view">
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="
                {{? it[i].catname == '品牌推荐'}}
                {{=it[i].arr[b].thumb}}
                {{??}}
                {{=it[i].arr[b].image_src}}
                {{?}}
                ">

                <div class="aui-img-body aui-ellipsis-1">
                    {{? it[i].catname == '品牌推荐'}}
                    {{=it[i].arr[b].title}}
                    {{??}}
                    {{=it[i].arr[b].catname}}
                    {{?}}
                </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
<script id="Other-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="other-list">
        <div class="other-title aui-border-b aui-ellipsis-1">
            {{=it[i].catname}}
        </div>
        <ul>
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4" tapmode onclick="toCategoryList({{=it[i].arr[b].catid}},'{{=it[i].arr[b].catname}}')">
                <div class="aui-img-body aui-ellipsis-1">
                    {{=it[i].arr[b].catname}}
                </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/textScroll.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();

        requestIndexData('index/getTrade','_indexTradeData','Trade-content','Trade-template');
        requestIndexData('index/getBrand','_indexBrandData','Brand-content','Brand-template');
        requestIndexData('index/getMarket','_indexMarketData','Market-content','Market-template');
        // hotCategory();
        // categoryImage();
        var obj = api.require('fs');
    }
//    $(function(){
//        var top=0;
//        var textScroll=setInterval(function () {
//            var ulHeight=$(".toutiaoTile ul").height();
//            var ulMarginTop=$(".toutiaoTile ul").css("margin-top");
//            $(".toutiaoTile ul").animate({"margin-top":"-=35px"},500,function () {
//                if(Math.abs(parseInt(ulMarginTop))>=(ulHeight-35)){
//                    $(".toutiaoTile ul").css({"margin-top":"0"})
//                }
//            })
//        },3000);
//    });
    $(function(){
        var body_w = $api.offset($api.dom('body')).w;
        var slideHeight=body_w*3/7.5;
        var slide3 = new auiSlide({
            container:document.getElementById("aui-slide"),
            // "width":300,
            "height":slideHeight,
            "speed":500,
            "autoPlay": 8000, //自动播放
            "loop":true,
            "pageShow":false,
            "pageStyle":'dot',
            'dotPosition':'center'
        });
        textMove(".toutiaoTile ul",3000,$(".toutiaoTile ul li").height())
    });

    function requestIndexData(url,storageFlag,domId,tplId){
        var oldData=$api.getStorage(storageFlag);
        if(oldData){
            renderIndexData(JSON.parse(oldData),domId,tplId);
        }
        ajaxRequest(url, 'get', {}, function (ret, err) {
            if (ret.status == 1) {
                var newData=JSON.stringify(ret.msg);
                if(oldData!=newData){
                    renderIndexData(ret.msg,domId,tplId);
                    $api.setStorage(storageFlag,newData);
                }
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    function renderIndexData(data,domId,tplId){
        var content = $api.byId(domId);
        var tpl = $api.byId(tplId).text;
        var tempFn = doT.template(tpl);
        $api.html(content, tempFn(data));
        // //图片延时加载
        // echo.init({
        //     offset: 0,
        //     throttle: 250
        // });
        iCache($('#'+domId+' .cache'));
    }

    ///切换左侧分类的样式

    //$(document).on("click",".contain-left li",function(){
    function changeCategory(obj) {
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        if ($(obj).index() == 0) {
            $(".tuijian").css({"display": "block"});
            $(".other").css({"display": "none"});
        } else {
            $(".tuijian").css({"display": "none"});
            $(".other").css({"display": "block"});
        }
    }
    //导航上面的分类控制显示隐藏
    function Category() {
        if ($(".fenlei").css("display") == "none") {
            $(".fenlei").css({"display": "block"});
            $(".content").css({"display": "none"});
        } else {
            $(".content").css({"display": "block"});
            $(".fenlei").css({"display": "none"});
        }
    }


    function funcGotoBakHome(index) {
        getStorageAll();
        if(!user_id){
            api.openWin({
                name: 'loginPass_win',
                url: 'loginPass_win.html',
            });
        }else{
            api.execScript({
                name: 'root',
                script: 'randomSwitchBtnBakHome(' + index + ')'
            });
        }
    }
    //提示信息
    function message() {
        api.toast({
            msg: '暂不支持',
            duration: 2000,
            location: 'middle'
        });
    }

    function tobrand() {
        api.openWin({
            name: 'pinpaishang_win',
            url: 'pinpaishang_win.html',
            reload: true,
            // //delay: 300
        });
    }

    //增加商品推荐分类及一级分类
    function hotCategory() {
        showLoading();
        var data = {};
        var url = 'category/categoryOne';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Category-content');
                var tpl = $api.byId('Category-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                //商品推荐
                var content = $api.byId('Hot-content');
                var tpl = $api.byId('Hot-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg[0].arr));
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //增加分类下面下级分类
    function categorySubordinate(catid) {
        showLoading();
        var data = {};
        var url = 'category/categorysubordinate/parentid/' + catid;
        ajaxRequest(url, 'get', data, function (ret, err) {
            var content = $api.byId('Other-content');
            $api.html(content, '');
            if (ret.status == 1) {
                var tpl = $api.byId('Other-template').text;
                var tempFn = doT.template(tpl);
                $api.prepend(content, tempFn(ret.msg));
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //商品分类顶图
    function categoryImage() {
        var data = {};
        var url = 'category/categoryImage';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                $('#categoryImage').attr('src', ret.msg);
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //跳转商品详细页
    function openProInfo(itemid){
        api.openWin({
            name : 'proInfo_win',
            url : 'proInfo_win.html',
            pageParam : {
                itemid : itemid
            },
            // delay : 300
        });
    }
    //打开商品列表
    function toCategoryList(catId,catName)
    {
        api.openWin({
            name : 'categoryList_win',
            url : 'categoryList_win.html',
            pageParam : {
                categoryId : catId,
                categoryName: catName
            },
            // delay : 300
        });
    }


    // //去到我的店铺
    // function tomyshop(userid) {
    //     api.openWin({
    //         name: 'my/myShop',
    //         url: 'my/myShop.html',
    //         pageParam: {
    //             companyid: userid
    //         },
    //         // //delay: 300
    //     });
    // }
</script>
</html>